import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, List, Icon, Tag } from 'weaver-mobile';
import { renderLoading } from '../public';
import { getFontColorFromBgHex } from '../../util';
const getLabel = Tools.getLabel;

@withRouter
@inject('communicationStore')
@observer
export default class Manage extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork-communication-manage',
  }

  componentDidMount() {
    const { communicationStore: { tagStore }, location: { pathname } } = this.props;
    if (pathname.indexOf('tag') === -1 ) tagStore.getCoworkLabelList();
    tagStore.getManageLabelList();
  }

  deleteTag = (id) => {
    const { communicationStore: { tagStore, getSearchAdvancedCondition, onSearch, detailStore }, location: { pathname } } = this.props
    const { deleteTag, getCoworkLabelList } = tagStore
    let callBack = () => {
      getSearchAdvancedCondition()
      onSearch()
      if (pathname.includes('tag/manage')) {
        if (pathname.includes('detail/tag/manage')) {
          detailStore.viewCowork()
        }
        getCoworkLabelList();
      }
    }
    deleteTag(id, callBack)
  }

  render(){
    const { prefixCls, communicationStore: { tagStore }, location: { pathname } } = this.props;
    const { labelManageList, tagLoading } = tagStore;
    return tagLoading ? renderLoading : (
      <div className={prefixCls}>
        <List>
          <List.Item className={`${prefixCls}-createTag`} onClick={() => this.props.history.push(`${pathname}/createTag`)}>
            <Icon type='plus' size='xxs'/>{getLabel(83263, '新建标签')}
          </List.Item>
          <div className={`${prefixCls}-content`}>
            {
              labelManageList && toJS(labelManageList).map((item, index) => {
                return (
                  <List.Item key={index} className={`${prefixCls}-tagLine`}>
                    <div className={`${prefixCls}-tagLine-lable`}>
                      <Tag 
                        style={{color: item.labelColor === '' ? '#333' : getFontColorFromBgHex(item.labelColor), backgroundColor: item.labelColor}}
                      >{item.labelName}</Tag>
                    </div>
                    <div className={`${prefixCls}-tagLine-ops`}>
                      <span className={`${prefixCls}-tagLine-editor`} onClick={() => this.props.history.push({pathname:`${pathname}/editTag`,state:item})}><Icon type='editor' size='xxs'/>{getLabel(93, '编辑')}</span>
                      <span className={`${prefixCls}-tagLine-delete`} onClick={() => this.deleteTag(item.id)}><Icon type='delete' size='xxs'/>{getLabel(91, '删除')}</span>
                    </div>
                  </List.Item>
                )
              })
            }
          </div>
        </List>
      </div>
    );
  }
}